<template>
  <section class="container relative">
    <el-image
      style="width: 100vw; height: calc(100vh - 74px); vertical-align: middle"
      :src="require('@/assets/images/car.png')"
      fit="cover"
    >
      <template #error>
        <icon-ep-picture class="w-full h-full text-gray-300" />
      </template>
    </el-image>
    <aside
      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(255,255,255,.9)] px-6 pb-6 rounded"
    >
      <h1 class="text-xl text-center text-primary my-6">用户注册</h1>
      <el-form :model="registerForm" :rules="registerRules" ref="registerForm" @keyup.enter.native="submitForm">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="registerForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="registerForm.password" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input placeholder="请再次输入密码" v-model="registerForm.repassword" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">注册</el-button> &nbsp;&nbsp;
          <el-link type="info" @click="$router.push('/login')">已有账号，请点击此处登录</el-link>
        </el-form-item>
      </el-form>
    </aside>
  </section>
</template>

<script>
  export default {
    name: 'Register',
    data() {
      // 自定义校验规则
      // 密码
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.registerForm.repassword !== '') {
            this.$refs.registerForm.validateField('repassword')
          }
          callback()
        }
      }
      // 确认密码
      let validateRePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        // 注册表单数据
        registerForm: {
          username: '',
          password: '',
          repassword: '',
        },
        // 表单校验规则
        registerRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' },
          ],
          password: [
            {
              required: true,
              validator: validatePass,
              trigger: 'blur',
            },
          ],
          repassword: [
            { required: true, validator: validateRePass, trigger: 'blur' },
            {
              min: 6,
              message: '长度不能小于6',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    methods: {
      ...mapActions('user', ['reqRegister']),
      // 提交表单
      submitForm() {
        this.$refs.registerForm.validate(async valid => {
          if (valid) {
            try {
              let { username, password } = this.registerForm
              await this.reqRegister({ username, password })
            } catch (error) {
              this.$refs.registerForm.resetFields()
              return this.$message.error('注册失败，请重新填写用户名和密码')
            }
            this.$alert('注册成功，是否跳转到登录页面', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                if (action == 'confirm') this.$router.push('/login')
              },
            })
          } else {
            return this.$message.error('请按照要求正确输入！')
          }
        })
      },
    },
  }
</script>
